<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>骡窝窝系统管理平台</title>
    <#include "../common/header.ftl"/>
    <link href="/js/plugins/chosen/component-chosen.css" rel="stylesheet">
    <script src="/js/plugins/chosen/chosen.jquery.js"></script>
    <style type="text/css">
        .chosen-container {
            width: 250px !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#query").click(function () {
                $("#searchForm").submit();
            });
            //删除关联
            $('.del_Btn').click(function () {
                var travelId = $(this).data('tid');
                var strategyId = $(this).data('sid');
                $.messager.confirm("温馨提示", "你确定要删除吗？", function () {
                    $.post('/strategyTravel/deleteRelation.do', {travelId: travelId,strategyId:strategyId}, function () {
                        location.reload();
                    })
                });
            })
            //查出所有大攻略
            $.get('/strategy/selectAll.do', function (data) {
                console.log(data);
                var temp = "";
                $.each(data, function (index, ele) {
                    temp += "<option value=" + ele.id + ">" + ele.title + "</option>"
                })
                $('#strategySelect').append(temp);
                //回显
                $("#strategySelect option[value='${qo.strategyId!""}']").prop("selected", true);
                //查询后 添加的按钮中的内容 要追加
                var strategyId = $('#strategySelect').val();
                var strategyTitle = $("#strategySelect option[value='${qo.strategyId!""}']").html();
                $('#strategyId').val(strategyId);
                $('#strategyTitle').val(strategyTitle);
                $('#strategySelect').chosen({
                    no_results_text: "无相关攻略!",
                    disable_search_threshold: 5,//选项小于10时不显示搜索框
                });
            })
            //查出所有发布的游记
            $.get('/travel/selectRelease.do', function (data) {
                var temp = "";
                $.each(data, function (index, ele) {
                    temp += "<option value=" + ele.id + ">" + ele.title + "</option>"
                })
                $('#travelSelect').html(temp);

            })
            //模态框内容 变动 当 左边大攻略 变的时候
            $('#strategySelect').change(function (event) {
                //拿到点击后的 攻略的id
                var id = $('#strategySelect').val();
                //拿到点击后的 攻略的标题
                var title = $('#strategySelect option[value=' + id + ']').html();
                //渲染到模态框里
                $('#strategyTitle').val(title);
                $('#strategyId').val(id);

            })
            //点击添加弹出模态框
            $('#addStrategyBtn').click(function () {
                $('#strategyModal').modal('show');
            })
            //保存按钮事件
            $('#saveBtn').click(function () {
                $('#editForm').ajaxSubmit(function () {
                    window.location.reload();
                })

            })
        });
    </script>
</head>

<body>
<div class="container">
<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
		<#assign currentMenu = "strategyTravel" />
				<#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>大家都在看</h3>
            </div>
            <div class="row">
                <!-- 提交分页的表单 -->
                <form id="searchForm" class="form-inline" method="post" action="/strategyTravel/list.do">
                    <input type="hidden" name="currentPage" id="currentPage" value="1"/>
                    <div class="form-group">
                    </div>
                    <div class="form-group">
                        <label>攻略搜索</label>
                        <select id="strategySelect" name="strategyId" class="form-control form-control-chosen"
                                data-placeholder="请选择所属攻略">
                            <option></option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button id="query" type="button" class="btn btn-success"><i class="icon-search"></i> 查询</button>
                        <a href="javascript:void(-1);" class="btn btn-success" id="addStrategyBtn">添加关联</a>
                    </div>
                </form>
            </div>
            <div class="row">
                <table class="table">
                    <thead>
                    <tr>
                        <th>关联游记</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#list (pageInfo.list)! as t>
                    <tr>
                        <td>${t.title}</td>
                        <td><a href="/travelRelease/list.do?travelId=${t.id}">查看游记</a></td>
                        <td><a href="javascript:void(-1);" class="del_Btn" data-tid="${t.id}" data-sid="${t.strategyId}">删除</a></td>
                    </tr>
                    </#list>
                    </tbody>
                </table>

                <div style="text-align: center;">
                    <ul id="pagination" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="strategyModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="/strategyTravel/insertRelation.do">
                    <input id="strategyId" type="hidden" name="strategyId" value=""/>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">所属攻略</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="strategyTitle" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">关联游记</label>
                        <div class="col-sm-6">
                            <select id="travelSelect" name="travelId" class="form-control form-control-chosen"
                                    data-placeholder="请选择关联的游记">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveBtn" aria-hidden="true">保存</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>